<template>
    <div class="container">
        <el-card class="box-card">
            <div class=" selected-container">
                <el-button type="warning" round @click="handleClick('awaitpass_article')">
                    待审核<el-icon class="selected-icon"
                        v-if="selectedBtn('awaitpass_article')"><Select /></el-icon></el-button>
                <el-button type="primary" round @click="handleClick('passed_article')">
                    待发布<el-icon class="selected-icon" v-if="selectedBtn('passed_article')"><Select /></el-icon></el-button>
                <el-button type="success" round @click="handleClick('published_article')">
                    已发布<el-icon class="selected-icon"
                        v-if="selectedBtn('published_article')"><Select /></el-icon></el-button>
                <el-button type="info" round @click="handleClick('unpassed_article')">
                    未通过<el-icon class="selected-icon"
                        v-if="selectedBtn('unpassed_article')"><Select /></el-icon></el-button>
                <el-button type="default" round @click="handleClick('draft_article')">
                    草稿箱<el-icon class="selected-icon" v-if="selectedBtn('draft_article')"><Select /></el-icon></el-button>
                <el-button type="danger" round @click="handleClick('deleted_article')">
                    已删除<el-icon class="selected-icon" v-if="selectedBtn('deleted_article')"><Select /></el-icon></el-button>
            </div>
            <hr>
            <router-view></router-view>
        </el-card>
    </div>
</template> 
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { Select } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

const handleClick = (pathName: string) => {
    router.push({ name: pathName })
}
const selectedBtn = ((name: string) => {
    return name === route.name
})
</script>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;

    .selected-container {
        display: flex;
        justify-content: space-around;
        // border: 1px solid;
        padding: 10px;

        .selected-icon {
            margin-left: 5px;
        }

    }

    .box-card {
        margin: 0 10px
    }


}
</style>